<script setup>
import NavBar from './NavBar.vue';
import { useTestLogic } from '../js/test.js';

const {
  showLoginDropdown,
  showLoginAlert,
  currentSlide,
  totalSlides,
  answeredQuestions,
  showFeaturePrompt,
  currentFeature,
  promptPosition,
  jumpToIndex,
  role,
  version,
  questions,
  loading,
  queslistId,
  userAnswers,
  unansweredQuestion,
  progressText,
  options,
  optionScores,
  jumpToQuestion,
  nextSlide,
  prevSlide,
  resetCurrentQuestion,
  selectAnswer,
  submitAnswer,
  checkUserLogin,
  closeFeaturePrompt,
  goToLoginFromPrompt,
  goToHome,
  goToLogin,
  restartTest,
  // 添加doctorId相关参数
  doctorId,
  isFollowupTest
} = useTestLogic();
</script>

<template>
  <div class="test-container">
    <NavBar />
    
    <div class="content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-overlay">
        <div class="loading-spinner"></div>
        <p>加载问题中...</p>
      </div>
      
      <!-- 轮播图上方的固定栏 -->
      <div class="question-header">
        <div class="question-instruction">
          <span>根据您近一年及近期的身体情况，回答以下问题:</span>
        </div>
        <div class="question-controls">
          <div class="question-jump">
            <input 
              type="number" 
              v-model.number="jumpToIndex" 
              min="1" 
              :max="totalSlides"
              placeholder="题号"
              class="jump-input"
            >
            <button @click="jumpToQuestion" class="jump-btn">跳转</button>
          </div>
          <div class="question-progress">
            <span>{{ currentSlide + 1 }}/{{ totalSlides }}</span>
          </div>
        </div>
      </div>
      
      <!-- 轮播图 -->
      <div class="carousel">
        <button class="carousel-arrow prev" @click="prevSlide">
          &lt;
        </button>
        
        <div class="carousel-wrapper">
          <div class="carousel-container" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
            <div 
              v-for="(question, index) in questions" 
              :key="index" 
              class="carousel-slide"
            >
              <div class="question-content">
                <h2 class="question-title">问题 {{ index + 1 }}</h2>
                <p class="question-text">{{ question.content }}</p>
                
                <div class="options-container">
                  <div 
                    v-for="(text, key) in options" 
                    :key="key"
                    class="option-item"
                    :class="{ selected: userAnswers[index] === key }"
                    @click="selectAnswer(key)"
                  >
                    <div class="option-label">{{ key }}: {{ text }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <button class="carousel-arrow next" @click="nextSlide">
          &gt;
        </button>
      </div>
      
      <!-- 轮播图指示器 -->
      <div class="carousel-indicators">
        <span 
          v-for="index in totalSlides"
          :key="index" 
          :class="{ 
            active: currentSlide === index - 1,
            answered: userAnswers[index - 1] !== '' 
          }"
          @click="currentSlide = index - 1"
        ></span>
      </div>
      
      <!-- 轮播图下方的按钮栏 -->
      <div class="action-buttons">
        <div class="left-buttons">
          <!-- 根据登录状态显示不同按钮 -->
          <button v-if="checkUserLogin()" class="return-btn" @click="goToHome">返回</button>
          <template v-else>
            <button class="login-btn" @click="goToLogin">去登录</button>
            <button class="restart-btn" @click="restartTest">重新测试</button>
          </template>
        </div>
        <div class="right-buttons">
          <button class="reset-btn" @click="resetCurrentQuestion">重置</button>
          <button 
            class="confirm-btn" 
            :class="{ 'submit': answeredQuestions === totalSlides }"
            @click="submitAnswer"
          >
            {{ answeredQuestions === totalSlides ? '提交' : '确定' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 登录提示弹窗 -->
    <div class="login-alert" v-if="showLoginAlert">
      <div class="alert-content">
        <p>该功能需要登录后解锁</p>
      </div>
    </div>

    <!-- 未作答提示弹窗 -->
    <div class="unanswered-alert" v-if="unansweredQuestion !== null">
      <div class="alert-content">
        <p>第 {{ unansweredQuestion }} 题未作答</p>
      </div>
    </div>

    <!-- 功能提示小弹窗 -->
    <div class="feature-prompt-mini" v-if="showFeaturePrompt" 
         :style="{ top: promptPosition.top + 'px', left: promptPosition.left + 'px' }">
      <div class="prompt-arrow"></div>
      <div class="prompt-content">
        <p>{{ currentFeature === 'personal' ? '个人中心' : '数据分析' }}需要登录</p>
        <div class="prompt-buttons">
          <button class="cancel-btn" @click="closeFeaturePrompt">取消</button>
          <button class="login-btn" @click="goToLoginFromPrompt">去登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="../css/test.css"></style>


